<template>
    <view class="page" style="background-color: white !important;">
         <view class="flex text-center font-size-16 align-center font-bold">
            <navigator url="/pages/social/home_apply" open-type="redirect" class="flex-1 tab-item ">申请帮扶</navigator>
            <view class="tab-line"></view>
            <navigator url="/pages/social/pub_apply" open-type="redirect" class="flex-1 tab-item active">加入爱心帮帮团</navigator>
        </view>
        <clear-line :height="8" :bacColor="'#F4F5FA'"></clear-line>
		 <!-- v-if="info && (info.audit_status === 0||info.audit_status>0)" -->
		<view class="container font-color-666 mar-t-8" v-if="info && (info.audit_status === 0||info.audit_status>0)">
		    <view class="border-b-1 flex list-item align-center">
		        <view class="title font-size-16">申请状态</view>
		        <view>:</view>
		        <view class="flex-1 box-b mar-l-20 font-size-15">
		            <text v-if="info.audit_status==0" class="font-color-red ">未通过</text>
		            <text v-if="info.audit_status==1" class="font-color-yellow">待审核</text>
		            <text v-if="info.audit_status==2" class="font-color-normal">已通过</text>
		        </view>
		    </view>
			<view class="border-b-1 flex list-item align-center" v-if="info.bac_content">
			    <view class="title font-size-16">驳回理由</view>
			    <view>:</view>
			    <view class="flex-1 box-b mar-l-20 font-size-15 font-color-888">
			        {{info.bac_content}}
			    </view>
			</view>
			<view class="border-b-1 flex list-item align-center">
			    <view class="title font-size-16">申请人</view>
			    <view>:</view>
			    <view class="flex-1 box-b mar-l-20 font-size-15 font-color-888">
			        {{info.apply_username}}
			    </view>
			</view>
			<view class="border-b-1 flex list-item align-center">
			    <view class="title font-size-16">性别</view>
			    <view>:</view>
			    <view class="flex-1 box-b mar-l-20 font-size-15 font-color-888">
			        {{info.sex_name}}
			    </view>
			</view>
			<view class="border-b-1 flex list-item align-center">
			    <view class="title font-size-16">婚姻状态</view>
			    <view>:</view>
			    <view class="flex-1 box-b mar-l-20 font-size-15 font-color-888">
			        {{info.marriage=='yes'?'已婚':'未婚'}}
			    </view>
			</view>
			<view class="border-b-1 flex list-item align-center">
			    <view class="title font-size-16">职业</view>
			    <view>:</view>
			    <view class="flex-1 box-b mar-l-20 font-size-15 font-color-888">
			        {{info.work_name}}
			    </view>
			</view>
			<view class="border-b-1 flex list-item align-center">
			    <view class="title font-size-16">工作单位</view>
			    <view>:</view>
			    <view class="flex-1 box-b  mar-l-20 font-size-15 font-color-888">
			        {{info.work_place}}
			    </view>
			</view>
			<view class="border-b-1 flex list-item align-center">
			    <view class="title font-size-16">学历</view>
			    <view>:</view>
			    <view class="flex-1 box-b  mar-l-20 font-size-15 font-color-888">
			        {{info.education}}
			    </view>
			</view>
			<view class="border-b-1 flex list-item align-center" v-if="info && info.audit_status == 0">
			    <view class="title font-size-16">家庭住址</view>
			    <view>:</view>
			    <view class="flex-1 box-b  mar-l-20 font-size-15 font-color-888">
			        {{info.home_address}}
			    </view>
			</view>
			<view class="border-b-1 flex list-item align-center">
			    <view class="title font-size-16">身份证号</view>
			    <view>:</view>
			    <view class="flex-1 box-b  mar-l-20 font-size-15 font-color-888">
			        {{info.card_num}}
			    </view>
			</view>
			<view class="border-b-1 flex list-item align-center">
			    <view class="title font-size-16">联系电话</view>
			    <view>:</view>
			    <view class="flex-1 box-b  mar-l-20 font-size-15 font-color-888">
			        {{info.mobile}}
			    </view>
			</view>
			<view class="border-b-1 flex list-item align-center">
			    <view class="title font-size-16">帮扶意向</view>
			    <view>:</view>
			    <view class="flex-1 box-b  mar-l-20 font-size-15 font-color-888">
			        {{info.type_name}}
			    </view>
			</view>
			<view class="list-item flex">
				<view class="title font-size-16" style="width: 100%;text-align-last: unset;">"初心"及"行动计划":</view>
			</view>
			<view class="box-b over-hid">
			   <view class="flex-1 box-b  mar-l-20 font-size-15 font-color-888">
			       {{info.remark}}
			   </view>
			</view>
		</view>
		<!-- v-else -->
        <view class="container font-color-666 mar-t-8" v-else>
            <view class="border-b-1 flex list-item align-center">
                <view class="title font-size-16">申请人</view>
                <view>:</view>
                <view class="flex-1 box-b mar-l-20">
                    <input
                        type="text"
                        v-model="apply_username"
                        placeholder="请填写申请人名称"
                        placeholder-clas="input-placeholder"
						maxlength="20"
                    />
                </view>
            </view>
            <view class="border-b-1 flex list-item align-center">
                <view class="title font-size-16">性别</view>
                <view>:</view>
                <radio-group @change="sexChange" class="flex-1 box-b mar-l-20">
                    <label class="dis-inline-block radio-item pad-l-10" >
                        <view class=" font-size-15 ">
                            <radio value="boy" :checked="apply_sex === 'boy'" style="transform:scale(0.7)"/>男
                        </view>
                    </label>
                    <label class="dis-inline-block radio-item" >
                        <view class=" font-size-15 ">
                            <radio value="girl" :checked="apply_sex === 'girl'" style="transform:scale(0.7)"/>女
                        </view>
                    </label>
                </radio-group>
            </view>
            <view class="border-b-1 flex list-item align-center">
                <view class="title font-size-16">婚姻状态</view>
                <view>:</view>
                <radio-group @change="marriageChange" class="flex-1 box-b mar-l-20">
                    <label class="dis-inline-block radio-item pad-l-10" >
                        <view class=" font-size-15 ">
                            <radio value="no" :checked="marriage === 'no'" style="transform:scale(0.7)"/>未婚
                        </view>
                    </label>
                    <label class="dis-inline-block radio-item" >
                        <view class=" font-size-15 ">
                            <radio value="yes" :checked="marriage === 'yes'" style="transform:scale(0.7)"/>已婚
                        </view>
                    </label>
                </radio-group>
            </view>
            <view class="border-b-1 flex list-item align-center">
              <view class="title font-size-16">职业</view>
              <view>:</view>
              <view class="flex-1 box-b mar-l-20">
                <input type="text" v-model="work_name" maxlength="20" placeholder="请填写职业"/>
              </view>
            </view>
            <view class="border-b-1 flex list-item align-center">
                <view class="title font-size-16">工作单位</view>
                <view>:</view>
                <view class="flex-1 box-b mar-l-20">
                    <input type="text" v-model="work_place" maxlength="50" placeholder="请填写工作单位"/>
                </view>
            </view>

            <view class="border-b-1 flex list-item align-center">
                <view class="title font-size-16">学历</view>
                <view>:</view>
                <!-- <view class="flex-1 box-b">
                    <input type="text" v-model="education" />
                </view> -->
				<picker class="flex-1 mar-l-20" @change="bindPickerChangeEducation" :value="educationIndex" :range="educationList">
					
					<view class="uni-input font-size-16 pad-l-10 font-color-999 flex align-center w-100" v-if="!education">
						<text class="">请选择学历 </text>
						<text>></text>
					</view>
					<view class="uni-input font-size-16 w-100 pad-l-10" v-else>{{education}}</view>
				</picker>
            </view>
            <view class="font-color-666 border-b-1">
                <view class="list-item flex">
            		<view class="title font-size-16">家庭住址</view>
            		<view class="font-size-16">:</view>
					<view class="font-size-16 mar-l-20 pad-l-10">
						苍南县
					</view>
            		<!-- <input type="text" v-model="zhen" @click="pickPop"/> -->
            		<picker class="flex-1 " @change="bindPickerChange" :value="zhenIndex" :range="zhenList">
            			<view class="uni-input font-size-16 mar-l-7 font-color-999 flex align-center w-100" v-if="!zhen">
            				<text class="">请选择镇 </text>
            				<text>></text>
            			</view>
            			<view class="uni-input font-size-16 mar-l-7 w-100" v-else>{{zhen}}</view>
            		</picker>
            	</view>
                <view class="box-b over-hid">
                   <textarea name="" id="" cols="10" rows="2" class="" placeholder="详细地址" v-model="home_address" style="height: 120rpx;" maxlength="50">
            
                   </textarea>
                </view>
            </view>
            <view class="border-b-1 flex list-item align-center">
                <view class="title font-size-16">身份证号</view>
                <view>:</view>
                <view class="flex-1 box-b mar-l-20">
                    <input type="text" v-model="card_num" maxlength="18" placeholder="请填写身份证号"/>
                </view>
            </view>
            <view class="flex list-item align-center border-b-1">
                <view class="title font-size-16">联系电话</view>
                
                <view class="flex-1 box-b mar-l-20">
                    <input type="text" v-model="mobile" maxlength="11" placeholder="请填写联系电话"/>
                </view>
            </view>
			<view class="list-item flex align-center border-b-1">
				<view class="title font-size-16">帮扶意向</view>
				<view>:</view>
				<picker class="flex-1 mar-l-20" @change="radioChange" :value="typeIndex" :range="typeList">
					<view class="uni-input font-size-16 mar-l-7 font-color-999 flex align-center w-100" v-if="!type">
						<text class="">请选择意向 </text>
						<text>></text>
					</view>
					<view class="uni-input font-size-16 mar-l-7 w-100" v-else>{{type}}</view>
				</picker>
			</view>
			<view class="list-item flex">
				<view class="title font-size-16" style="width: 100%;text-align-last: unset;">请简要说说您的"初心"及"行动计划":</view>
			</view>
			<view class="box-b over-hid">
			   <textarea v-model="remark" cols="30" rows="10" class="" placeholder='' maxlength="500">
						
			   </textarea>
			</view>
			<button class="confirm-btn" @click="confirm" :disabled="isDisable">提交申请</button>
        </view>
        <view style="height:60px"></view>
    </view>
</template>

<script>
import {pubApply,pubApplyDetail,getSocialType} from '@/utils/http'
export default {
    data() {
        return {
            type_name:'留守儿童',
            items: ['留守儿童', '事实无人抚养儿童', '低保低边家庭的儿童', '其他儿童'],
            apply_username:'',
            apply_sex:'boy',//申请人性别
            work_place:'',
            work_name:'',
			zhen:'',
			zhenList:['灵溪镇','桥墩镇','马站镇','钱库镇','金乡镇','望里镇','宜山镇','藻溪镇','莒溪镇','南宋镇','矾山镇','炎亭镇','大渔镇','赤溪镇','沿浦镇','霞关镇','岱岭畲族乡','凤阳畲族乡'],
			education:'',
			educationIndex:'',
			educationList:['研究生及以上','本科','专科','高中','初中及以下'],
			zhenIndex:'',
            home_address:'',
            card_num:'',
            mobile:'',
            remark:'',
            special_ask:'',//其他要求
            isDisable:false,
            info:'',
            marriage:'no',
			type:'',
			typeIndex:'',
			typeList: ['留守儿童', '事实无人抚养儿童', '低保底边等困难家庭的儿童', '其他儿童'],
        }
    },
    computed:{
        // type(){
        //     return this.items[this.current].value
        // }
    },
    methods: {
		getSocialType() {
			getSocialType().then(res=>{
			    if(res){
			        console.log('getSocialType——res',res);
			       this.typeList = res.type
				   this.educationList = res.education
			    }
			})
		},
		bindPickerChangeEducation(e) {
			console.log('picker发送选择改变，携带值为', e.target.value)
			this.educationIndex = e.target.value
			this.education = this.educationList[this.educationIndex]
		},
		bindPickerChange(e) {
			console.log('picker发送选择改变，携带值为', e.target.value)
			this.zhenIndex = e.target.value
			this.zhen = this.zhenList[this.zhenIndex]
		},
        marriageChange(e){
            this.marriage = e.detail.value
        },
        pubApplyDetail(){
            pubApplyDetail().then(res=>{
                console.log(res);
                this.info = res
                this.apply_username = res.apply_username
                this.apply_sex = res.apply_sex//申请人性别
                this.work_place= res.work_place
                this.work_name= res.work_name
                this.education = res.education
                this.home_address = res.home_address
                this.card_num = res.card_num
                this.mobile = res.mobile
                this.remark = res.remark
                this.type = res.type_name
                this.marriage = res.marriage
                this.special_ask = res.special_ask//其他要求

            })
        },
        sexChange(e){
            console.log(e);
            this.apply_sex = e.detail.value
        },
        radioChange(e){
            // this.type_name = e.detail.value;
        	// console.log('this.type_name',this.type_name)
        	this.typeIndex = e.target.value
        	this.type = this.typeList[this.typeIndex]
        },
        confirm(){
            let _that = this;
			if(this.card_num.length<18){
				uni.showModal({
					content:'请正确填写身份证号',
					showCancel:false
				})
				return
			}
			if(this.mobile.length<11){
				uni.showModal({
					content:'请正确填写手机号',
					showCancel:false
				})
				return
			}
            this.isDisable = true
			const params = {
                apply_username:this.apply_username,
                apply_sex:this.apply_sex,
                work_place:this.work_place,
                work_name:this.work_name,
                education:this.education,
                home_address:`苍南县,${this.zhen},${this.home_address}`,
                card_num:this.card_num,
                mobile:this.mobile,
                remark:this.remark,
                type_name:this.type,
                special_ask:this.special_ask,
                marriage:this.marriage
            }
			console.log('params',params)
            pubApply(params).then(res=>{
                if(res){
                    this.showModelTip('申请成功',function(){
                        _that.pubApplyDetail();
                    });
                    setTimeout(() => {
                        this.isDisable = false
                        this.redirect('/pages/social/my_apply')     
                    }, 1000);
                }else{
                     this.isDisable = false
                }
            })
        }
    },
    onLoad(options) {
		this.getSocialType()
        this.pubApplyDetail();
    },
};
</script>

<style scoped>
.tab-item{
    padding-top: 30rpx;
    padding-bottom: 30rpx;
}
.tab-line{height:28rpx; width: 1px; background: #ccc;}
.tab-item.active{
    color: #0092FF;
}
.list-item {
    padding-top: 13px;
    padding-bottom: 10px;
    box-sizing: border-box;
}
.list-item .title {
    width: 180rpx;
    text-align: justify;
    text-align-last: justify;
}
.list-item input{
    padding-left: 20rpx;
    padding-right: 10px;
}
/deep/.input-placeholder {
    font-size: 32rpx;
	color: #c8c8c8;
}
.radio-item{
    width:33.33333%;
}
textarea{
    background-color: #F7F8FA;
    width: 100%;
    padding-top: 10px;
    padding-right: 10px;
    padding-left: 10px;
}
</style>